<template>
  <div class="box section clearfix">
    <div>
      <el-form :inline="true" style="text-align: left">
        <el-form-item label="完成状态:">
          <el-select v-model="query.completeStatus" placeholder="请选择">
            <el-option
              v-for="item in completeStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input
            v-model="query.name"
            style="width: 150px"
            placeholder="请输入姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="期数:">
          <el-input
            style="width: 150px"
            placeholder="请输入期数"
            v-model="query.periodsNumber"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码:">
          <el-input
            placeholder="手机号码"
            v-model="query.phoneNumber"
            clearable
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="search">查找</el-button>
        <el-button type="danger" @click="reset">重置</el-button>
      </el-form>
    </div>

    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column
        prop="orderNumber"
        label="订单号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="name"
        label="签约人姓名"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="phoneNumber"
        label="签约人手机号码"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="idCard"
        label="签约人身份证"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="bankCardNumber"
        label="签约银行卡号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="bankDeposit"
        label="开户行"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="beginHoldMouth"
        label="代扣起始月"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="withHoldDay"
        label="每月扣款日"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="chinaPayNoteCode"
        label="银联获取的验证码"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="completeStatus"
        label="完成状态"
        align="center"
        :formatter="whetherStatusFormat"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="unionStatus"
        label="银联状态"
        align="center"
        :formatter="whetherStatusFormat"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          <span>{{ row.unionStatus ? "已签约" : "未签约" }}</span>
        </template>

      </el-table-column>
      <el-table-column
        prop="yseStatus"
        label="银盛状态"
        align="center"
        :formatter="whetherStatusFormat"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          <span>{{ row.yseStatus ? "已签约" : "未签约" }}</span>
        </template>

      </el-table-column>
      <el-table-column
        prop="contractNum"
        label="委托合同号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="noteCode"
        label="短信链接码"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="periodsNumber"
        label="期数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="principalMoney"
        label="本金"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="signRatio"
        label="担保费用比例"
        align="center"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        prop="stagesMoney"
        label="分期金额"
        align="center"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        prop="stagesMoney"
        label="分期金额"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="earnestMoney"
        label="保证金额"
        align="center"
        :show-overflow-tooltip="true"
      >
        <!-- {{scope.row}} -->
        <!-- <span>{{
            scope.row.ensureRatio
              | capitalize(scope.row.stagesMoney, scope.row.signRatio)
          }}</span> -->
        <!-- <span v-if="scope.row.ensureRatio==null">1</span>
        <span v-else>2</span> -->
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="updateTime"
        label="更新时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="upDateFun(scope.row)"
            v-if="scope.row.operatorId==null  || (scope.row.operatorId!=null &&  (scope.row.yseStatus || scope.row.unionStatus))"
            style="color: #ffa42f"
            v-no-more-click
          >解约
          </el-button
          >
          <el-button
            type="text"
            size="small"
            @click="CardButton(scope.row)"
            v-if="scope.row.operatorId==null"
            style="color: #ffa42f"
            v-no-more-click
          >换签
          </el-button
          >
          <span v-if="!scope.row.yseStatus &&  !scope.row.unionStatus && scope.row.operatorId!=null">{{ scope.row.suspendReason }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="解约"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-width="110px"
      >
        <el-form-item label="解约原因" prop="name">
          <el-input
            v-model="ruleForm.name"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDia">取 消</el-button>
        <el-button type="primary" @click="innerFun">确 定</el-button>
      </span>
      <el-dialog
        width="20%"
        title="提示"
        :visible.sync="innerVisible"
        append-to-body
      >
        <span>此操作不可逆，请谨慎操作！</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeDia">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
    <DialogVisibleInCard
      :indexTrue="Open"
      :statusData="statusData"
      @down="valueOf($event)"
      @statusData="statusDatas($event)"
    ></DialogVisibleInCard>
  </div>
</template>

<script>
import {
  getSginPage,
  getEmployee,
  postRescind,
  getAlterSignInfo,//换卡信息查询接口!
  termination
} from "../../../src/assets/js/api";
import DialogVisibleInCard from "../../components/electronicContract/DialogVisibleInCard.vue";

export default {
  // filters: {
  //   capitalize: function (value, value1, value2) {
  //     if (!value) return "无数据";

  //     return (value1 / value2) * value;
  //   },
  // },
  name: "Management",
  components: {
    DialogVisibleInCard
  },
  data() {
    return {
      Open: false, //换卡弹窗开关!
      statusData: {}, //换卡信息各类状态!
      query: {
        pageSize: 10,
        pageNo: 1,
        completeStatus: null, //完成状态!
        name: "", //姓名!
        periodsNumber: null, //期数!
        phoneNumber: null //手机号码!
      },
      //筛选框,完成状态!
      completeStatus: [
        { value: 0, label: "否" },
        { value: 1, label: "是" }
      ],
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      whetherData: [],
      ruleForm: {},
      dialogVisible: false,
      innerVisible: false,
      rules: {
        name: [{ required: true, message: "请输入解约原因", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getList();
    this.getWhether();
  },

  methods: {
    // 子组件传给父组件的状态数据!
    statusDatas(data) {
      this.statusData = data;
    },
    // 换卡按钮!
    CardButton(data) {
      //data.id
      getAlterSignInfo(data.id).then((res) => {
        this.Open = true;
        console.log(res);
        this.statusData = res.data;
      });
    },
    //关闭卡片弹窗!
    valueOf(data) {
      this.Open = data;
    },
    //重置功能!
    reset() {
      this.query.completeStatus = null;
      this.query.name = null;
      this.query.periodsNumber = null;
      this.query.phoneNumber = null;

      this.getList();
    },
    //筛选查找功能!
    search() {
      this.query.pageNo = 1;
      this.getList();
    },
    //   获取数据
    getList() {
      getSginPage(this.query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;

          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
    },
    // 解约
    upDateFun(row) {
      this.dialogVisible = true;
      this.ruleForm.id = row.id;
    },
    innerFun() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.innerVisible = true;
        }
      });
    },

    onSubmit() {
      termination(this.ruleForm).then((res) => {
        if (res.code == 200) {
          this.getList();
          this.dialogVisible = false;
          this.innerVisible = false;
          this.$refs.ruleForm.resetFields();
          this.$message({ message: res.message, type: "success" });
        }
      });
    },
    closeDia() {
      this.innerVisible = false;
      this.dialogVisible = false;
      this.$refs.ruleForm.resetFields();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.$refs.ruleForm.resetFields();
        })
        .catch(() => {
        });
    },
    // 查询数据字典
    getWhether() {
      getEmployee("whether_state").then((res) => {
        this.whetherData = res.data;
      });
    },
    whetherStatusFormat(row) {
      return this.selectDictLabel(this.whetherData, row.completeStatus);
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    }
  }
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}

::v-deep .el-table th {
  padding: 10px 0;
}

.query ::v-deep .el-input__inner {
  height: 32px;
}

.query ::v-deep .el-input__icon {
  line-height: 32px;
}

.query ::v-deep .el-form-item {
  width: 320px;
}

.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}

.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}

::v-deep .btn .el-button {
  line-height: 0;
  width: 80px;
  height: 32px;
}

::v-deep .el-table th > .cell {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}

.box {
  position: relative;
  padding: 20px 20px 50px 20px;
  background: #fff;
}

::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  left: 0;
  margin-top: 15px;
  color: rgba(51, 51, 51, 1);
}

.demo-form-inline {
  display: flex;
}
</style>
